<template>
    <div class="addFileSituation-content-box">
        <!-- :dialog-style="{ top: '40px' }" -->
         <!-- 技术审评笔记添加审评地点-->
        <a-modal
            :title="this.fromSate.id?'编辑文件审评情况':'新增文件审评情况'"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            :width="800"
            :dialogStyle="{top:'20px'}"
            :forceRender="forceRender"
            class="addFileSituation-modal-v"
        >
            <a-spin tip="正在加载中..." :spinning="spinning">
                <div class="addFileSituation-modal-box-v" >
                    <div style="flex: 1;padding-bottom: 10px;">
                        <table border bordercolor="#d9d9d9" style="width: 100%;">
                            <tr>
                                <td class="title-left-v">
                                    文件类型
                                </td>
                                <td colspan="5">
                                    <vxe-pulldown ref="pulldownRef" destroy-on-close style="width: 100%;">
                                        <template #default>
                                            <a-textarea 
                                                v-model="fromSate.fwjfl"
                                                :autosize="{ minRows: 1, maxRows: 5 }"
                                                placeholder="请选择或输入文件类型"
                                                @focus="focusEvent" @keyup="keyupEvent"
                                            ></a-textarea>
                                            <!-- <vxe-input v-model="searchName" placeholder="可搜索的大数据下拉框" @focus="focusEvent" @keyup="keyupEvent"></vxe-input> -->
                                        </template>
                                        <template #dropdown>
                                            <vxe-list height="200" class="my-dropdown2" :data="optionList" auto-resize style="border: 1px solid #38f;">
                                                <template #default="{ items }">
                                                    <div class="list-item2" v-for="(item,index) in items" :key="index" @click="selectEvent(item)" style="padding: 5px;border: 1px solid #d9d9d9;">
                                                        <span>{{ item }}</span>
                                                    </div>
                                                </template>
                                            </vxe-list>
                                        </template>
                                    </vxe-pulldown>
                                </td>
                            </tr>
                            <tr>
                                <td class="title-left-v">
                                    <div style="display: flex;justify-content: flex-end;" >
                                        <span style="display: flex;width: 64px;justify-content: space-between;" >
                                            <span>文</span>
                                            <span>件</span>
                                            <span>名</span>
                                        </span>
                                    </div>
                                </td>
                                <td colspan="5">
                                    <a-textarea 
                                        v-model="fromSate.fwjm"
                                        :autosize="{ minRows: 1, maxRows: 3 }"
                                        placeholder="请输入文件名"
                                    ></a-textarea>
                                </td>
                            </tr>
                            <tr>
                                <td class="title-left-v">
                                    文件编号
                                </td>
                                <td colspan="5">
                                    <a-textarea 
                                        v-model="fromSate.fwjbh"
                                        :autosize="{ minRows: 1, maxRows: 3 }"
                                        placeholder="请输入文件编号"
                                    ></a-textarea>
                                </td>
                            </tr>
                            <tr>
                                <td class="title-left-v">
                                    企业执行情况
                                </td>
                                <td colspan="5">
                                    <a-textarea 
                                        v-model="fromSate.fqyzxqk"
                                        :autosize="{ minRows: 3, maxRows: 18 }"
                                        placeholder="请输入企业执行情况"
                                    ></a-textarea>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import {
    jcbjaddJcqk,
    jcbjupdateJcqk,
    jcbjgetLsJcqkfl,
} from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
import blobType from '@/common/blobType'
import commpKindeditor from '@/components/commp-kindeditor/commpKindeditor.vue'
export default {
    components:{
        commpVxeTable,
        commpKindeditor,
    },
    props:{

    },
    data(){
        return{
            currentData:{},
            visible:false,
            chapterList:[],
            headList:[],
            spinning:false,
            spinningKey:null,
            dataTableKey:null,
            selectId:[],
            editvisible:false,
            selectData:{},
            isVisible:true,
            fromSate:{},
            commpKindeditorKey:null,
            addFileSituationKey:null,
            forceRender:true,
            windowInnerHeight:window.innerHeight,
            uploadBoxKey:null,
            fileList:[],
            checkNotesSpinning:false,
            isEyeAll:false,
            optionList:[],
            mockData:[],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.fromSate = val
            this.uploadBoxKey = Date.now()
            this.spinning = true
            jcbjgetLsJcqkfl({sqsxid:this.fromSate.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.optionList = JSON.parse(JSON.stringify(res.result))
                    this.mockData = JSON.parse(JSON.stringify(res.result))
                }else{
                    this.optionList = []
                    this.mockData = []
                }
                this.spinning = false
            })
            
        },
        focusEvent(){
            const $pulldown = this.$refs.pulldownRef
            if ($pulldown) {
                $pulldown.showPanel()
            }
        },
        keyupEvent(){
            this.optionList = this.fromSate.fwjfl ? this.mockData.filter((item) => item.indexOf(this.fromSate.fwjfl) > -1) : this.mockData
        },
        selectEvent(item){
            const $pulldown = this.$refs.pulldownRef
            if ($pulldown) {
                this.fromSate.fwjfl = item
                $pulldown.hidePanel().then(() => {
                this.optionList = this.mockData
                })
            }
        },
        handleOk(){
            if(this.fromSate.id){
                jcbjupdateJcqk(this.fromSate).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.$emit('addFileSituationsuccess',this.fromSate)
                        this.visible = false
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                jcbjaddJcqk(this.fromSate).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.$emit('addFileSituationsuccess',this.fromSate)
                        this.visible = false
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            
        },
        
    }
}
</script>
<style lang="less">
.addFileSituation-modal-v{
    .ant-modal-body{
        padding:8px;
        max-height: calc(100vh - 152px);
        overflow: auto;
    }
}
// .addFileSituation-content-box{
    .extractsi-top-box{
        margin-top: 10px;
        display: flex;
        align-items: center;
        background-image: linear-gradient(to bottom, #e7f3ff, #fff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff);
        background-size: 100% 100% !important;
        padding:8px;
        border:1px solid #d9d9d9;
        .situation-left-title{
            display: inline-block;
            background-color: #e6f7ff;
            text-align: left;
            font-weight: 600;
            font-size: 16px;
            font-family: simHei;
            color: rgba(0, 0, 0, 0.85);
            margin-right: 8px;
        }
    }
    .addFileSituation-modal-box-v{
        display: flex;
        .ant-spin-nested-loading{
            height: auto;
        }
        .add-check-notes{
            display:flex;
            flex-wrap:wrap;
            .addFileSituation-item-box{
                width: 104px;
                height: 104px;
                margin: 4px;
                border: 1px solid #d9d9d9;
                border-radius: 4px;
                overflow:hidden;
                display:flex;
                justify-content:center;
                align-items:center;
                .checkNotes-file-item{
                    width: 104px;
                    height: 104px;
                    // margin: 4px;
                    // border: 1px solid #d9d9d9;
                    border-radius: 4px;
                    overflow:hidden;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                }
                .an-upload-list-item{
                    position: relative;
                    float: left;
                    width: 104px;
                    height: 104px;
                    // margin: 0 3px 3px 0;
                    opacity: 1;
                }
                .an-upload-list-item-info{
                    position: relative;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }
                
                .an-upload-list-item:hover .an-upload-list-item-info:before{
                    position: absolute;
                    z-index: 5;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0,0,0,.5);
                    transition: all .3s;
                    content: " ";
                }
                
                .an-upload-list-item-actions{
                    z-index: 10;
                    width: 16px;
                    margin: 0 4px;
                    color: hsla(0,0%,100%,.85);
                    font-size: 18px;
                    cursor: pointer;
                    position: absolute;
                    top: 50%;
                    left: 23%;
                    white-space: nowrap;
                    transform: translate(-50%,-50%);
                    opacity: 0;
                    transition: all .3s;
                }
                .icon-v-nf{
                    padding: 0 10px;
                }
                .an-upload-list-item:hover .an-upload-list-item-actions{
                    opacity: 1;
                }
            }
            
            .addFileSituation-plus-text{
                border: 1px dotted #d9d9d9;
                background-color: #fafafa;
                display:flex;
                flex-direction:column;
                justify-content:center;
                .plus-icon{
                    font-size:32px;
                    color: #999;
                }
                .upload-text{
                    margin-top: 8px;
                    color: #666;
                }
            }
        }
        td{
            padding: 6px;
            height: 30px;
        }
        .title-left-v{
            text-align: right;
            width: 115px;
            font-weight: 600;
            font-size: 16px;
            background-color:#e6f7ff;
            font-family: simHei;
            color: rgba(0, 0, 0, 0.85);
        }
    }
// }


</style>